<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>聊天记录</title>
    <!-- Layui Css -->
    <link rel="stylesheet" th:href="@{/static/layim/dist/css/layui.css}"/>
    <!-- Layui Js -->
    <script th:src="@{/static/layim/dist/layui.js}"></script>
    <style>
        body .layim-chat-main {
            height: auto;
        }
    </style>
</head>
<body>

<div class="layim-chat-main">
    <ul id="LAY_view"></ul>
</div>

<div id="LAY_page" style="margin: 0 10px;"></div>


<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.id == parent.layui.layim.cache().mine.id){ }}
    <li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite><i>{{ layui.data.date(item.timestamp) }}</i>{{ item.username }}</cite></div><div
            class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# } else { }}
    <li><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite>{{ item.username }}<i>{{ layui.data.date(item.timestamp) }}</i></cite></div><div
            class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# }
}); }}
</textarea>

<script th:inline="javascript">
    var basePath = [[${#servletContext.contextPath}]];
    layui.use(['layim', 'laypage'], function () {
        var laytpl = layui.laytpl
            , $ = layui.jquery
            , laypage = layui.laypage;

        $.post(basePath + "/public/getHistoryCount", {
            userCode: [[${userCode}]],
            fromCode: [[${fromCode}]],
        }, function (rest) {
            laypage.render({
                elem: 'LAY_page',
                limit:30
                , count: rest.data?rest.data:0 //数据总数，从服务端得到
                , jump: function (obj, first) {
                    $.post(basePath + "/public/getHistory", {
                        "param[userCode]": [[${userCode}]],
                        "param[fromCode]": [[${fromCode}]],
                        page:obj.curr,
                        limit:obj.limit
                    }, function (res) {
                        if (res.success) {
                            var html = laytpl(LAY_tpl.value).render({
                                data: res.data.reverse()
                            });
                            $('#LAY_view').html(html);
                            scrollBottom();
                        }
                    })
                    scrollBottom();
                }
            });
        })
        scrollBottom();
        function scrollBottom() {
            window.scroll(0, document.body.scrollHeight)
        }
    });
</script>
</body>
</html>
